<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
</head>
<body>
<div id="app">
    <form @submit.prevent="formHandler">
        用户名：<input type="text" v-model="userName"><br>
        密码：<input type="password" v-model="userPass"><br>
        性别：
        <input type="radio" name="sex" value="男" v-model="sex">男
        <input type="radio" name="sex" value="女" v-model="sex">女<br>
        爱好：
        <input type="checkbox" name="hobby" value="篮球" v-model="hobby">篮球
        <input type="checkbox" name="hobby" value="足球" v-model="hobby">足球
        <input type="checkbox" name="hobby" value="乒乓球" v-model="hobby">乒乓球<br>
        <select name="city" v-model="city">
            <option v-for="item in allCity" :value="item.id">{{item.name}}</option>
        </select><br>
        <textarea name="introduction" v-model="introduction"></textarea><br>
        <input type="submit" value="注册">
    </form>

</div>
<script src="../vue.min-2.6.10.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userName: '',
            userPass: '',
            sex: '女',
            hobby: ['足球'],
            allCity:[{id: 1, name:'广州'}, {id:2, name: '深圳'}],
            city: 2,
            introduction: ''
        }, methods: {
            formHandler() {
                console.log(this.userName);
                console.log(this.userPass);
                console.log(this.sex);
                console.log(this.hobby);
                console.log(this.city);
                console.log(this.introduction);
            }
        }
    });
</script>
</body>
</html>